<template>
    <div class="ebook-reader">
        <div id="read"></div>
        <div class="mask">
            <div class="left" @click="prevPage"></div>
            <div class="center" @click="toggleTitleAndMenu"></div>
            <div class="right" @click="nextPage"></div>
        </div>
    </div>
</template>

<script>
    import { ebookMixin } from '../../utils/mixin'
    import { getFontFamily, saveFontFamily, getFontSize, saveFontSize, getTheme, saveTheme } from '../../utils/localStorage'
    import Epub from 'epubjs'
    import { addCss } from '../../utils/book'
    global.ePub = Epub
    export default {
        mixins: [ebookMixin],
        methods: {
            prevPage () {
                if (this.rendition) {
                    this.rendition.prev()
                    this.hideTitleAndMenu()
                }
            },
            nextPage () {
                if (this.rendition) {
                    this.rendition.next()
                    this.hideTitleAndMenu()
                }
            },
            toggleTitleAndMenu () {
                this.setMenuVisible(!this.menuVisible)
                if (!this.menuVisible) {
                    this.setSettingVisible(-1)
                    this.setFontFamilyVisible(false)
                }
            },
            hideTitleAndMenu () {
                // this.$store.dispatch('setMenuVisible', false)
                this.setMenuVisible(false)
                this.setSettingVisible(-1)
                this.setFontFamilyVisible(false)
            },
            initFontSize () {
                let fontSize = getFontSize(this.fileName)
                if (!fontSize) {
                    saveFontSize(this.fileName, this.defaultFontSize)
                } else {
                    this.rendition.themes.font(fontSize)
                    this.setDefaultFontSize(fontSize)
                }
            },
            initFontFamily () {
                let font = getFontFamily(this.fileName)
                if (!font) {
                    saveFontFamily(this.fileName, this.defaultFontFamily)
                } else {
                    this.rendition.themes.font(font)
                    this.setDefaultFontFamily(font)
                }
            },
            initTheme () {
                let defaultTheme = getTheme(this.fileName)
                if (!defaultTheme) {
                    defaultTheme = this.themeList[0].name
                    this.defaultTheme(defaultTheme)
                    saveTheme(this.fileName, defaultTheme)
                }
                this.themeList.forEach(theme => {
                    this.rendition.themes.register(theme.name, theme.style)
                })
                this.rendition.themes.select(this.defaultTheme)
            },
            initGlobalStyle() {
                addCss('')
            },

            initEpub () {
                const url = 'http://localhost:8081/epub/Biomedicine/' + this.fileName + '.epub'
                this.book = new Epub(url)
                this.setCurrentBook(this.book)
                this.rendition = this.book.renderTo('read', {
                    width: innerWidth,
                    height: innerHeight,
                    method: 'default'
                })
                this.rendition.display().then(() => {
                    this.initTheme()
                    this.initFontSize()
                    this.initFontFamily()
                    this.initGlobalStyle()
                })
                this.rendition.on('touchstart', event => {
                    this.touchStartX = event.changedTouches[0].clientX
                    this.touchStartTime = event.timeStamp
                })
                this.rendition.on('touchend', event => {
                    const offsetX = event.changedTouches[0].clientX - this.touchStartX
                    const time = event.timeStamp - this.touchStartTime
                    if (time < 500 && offsetX > 40) {
                        this.prevPage()
                    } else if (time < 500 && offsetX < -40) {
                        this.nextPage()
                    } else {
                        this.toggleTitleAndMenu()
                    }
                    event.preventDefault()
                    event.stopPropagation()
                })
                this.rendition.hooks.content.register(contents => {
                    Promise.all([
                        contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/daysOne.css`),
                        contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/cabin.css`),
                        contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/montserrat.css`),
                        contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/tangerine.css`)
                    ]).then(() => {
                        console.log('字体全部加载完毕...')
                    })
                })
            }
        },
        mounted () {
            const fileName = this.$route.params.fileName.split('|').join('/')
            // this.$store.dispatch('setFileName', fileName).then(() => {
                // })
            //     this.initEpub()
            this.setFileName(fileName).then(() => {
                this.initEpub()
            })
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/styles/global';
    .ebook {
        position: relative;
        .ebook-reader {
            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                z-index: 100;

                .left {
                    width: px2rem(100);
                }
                .center {
                    flex: 1;
                }
                .right {
                    flex: 0 0 px2rem(100);
                }
            }
        }
    }
</style>
